<template>
  <div class="log-details">
    <span class="table-blue" @click="back"><i class="iconfont icon-left"></i>返回</span>

    <div class="infos">
      <div>开始时间：{{formatDateByStringMatch(pipelineTaskLog.pipelineJobSt)}}</div>
      <div>结束时间：{{formatDateByStringMatch(pipelineTaskLog.pipelineJobFt)}}</div>
      <div>状态：{{translateStatus(pipelineTaskLog.status)}}</div>
    </div>
    <div class="content" v-if="contentShow">
      <Collapse>
        <Panel
          v-for="item in pipelineTaskLog.logs"
          :key="item.pipelineTaskId"
          :name="item.pipelineTaskId"
          class="task"
        >
          <span class="task-name">{{item.pipelineTaskName}}</span>
          <span class="status-img" :class="item.status.toLowerCase()"></span>
          <div slot="content" class="log-info">
            <div v-for="(logItem, index) in item.logs" :key="index">
              <div class="index">{{index + 1}}</div>
              <div class="info">{{logItem.replace('(', ' (')}}</div>
            </div>
          </div>
        </Panel>
      </Collapse>
    </div>
  </div>
</template>

<script>
import { getLogs } from 'http/api/pipeline';
import { Collapse, Panel } from 'iview';
import { formatDateByStringMatch } from 'assets/scripts/common';

export default {
  components: {
    Collapse,
    Panel
  },
  props: ['pipelineJobId', 'icon', 'pipelineJobName'],
  data () {
    return {
      contentShow: false,
      pipelineTaskLog: [],
      formatDateByStringMatch: formatDateByStringMatch
    };
  },
  computed: {},
  methods: {
    translateStatus (status) {
      let result = 'NA';
      if (status === 'RUNNING') {
        result = '进行中';
      } else if (status === 'SUCCESS') {
        result = '成功';
      } else if (status === 'FAIL') {
        result = '失败';
      }
      return result;
    },
    back () {
      this.$emit('back');
    }
  },
  mounted () {
    let id = this.pipelineJobId;
    getLogs({
      id: id
    }).then(res => {
      if (res) {
        this.pipelineTaskLog = res.data;
        this.contentShow = true;
        // this.icon = localStorage.getItem('atlasIcon')
      }
    });
  }
};
</script>

<style rel="stylesheet/less"  scoped lang="less" >
@import "../../assets/theme/themeBlue.less";
.log-details {
  width: 100%;
  height: 100%;
  .table-blue{
    display: inline-block;
    margin: 20px;
    font-size: 12px;
    color: @primary;
    .icon-left{
      font-size: 12px;
    }
  }
  .header {
    padding: 0 20px 0;
    height: 60px;
    line-height: 60px;
    background: #fff;
    &.none-bg{
      background:none;
    }
    .img {
      width: 30px;
      height: 30px;
      margin-right: 10px;
      vertical-align: middle;
      position: relative;
      top: -3px;
    }
    .first-title {
      display: inline-block;
      vertical-align: middle;
    }
  }

  .infos {
    margin: 0 25px 20px 20px;
    font-size: 12px;
    color: @content-text;
    line-height: 24px;
    div {
      display: inline-block;
      margin-right: 30px;
      line-height: 24px;
      color: @content-text;
    }
  }

  .content {
    margin: 10px 20px;
    .task {
      .task-name {
        font-size: 12px;
        color: @title-text
      }
      .status-name {
        vertical-align: middle;
      }
      .status-img {
        vertical-align: middle;
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 14px;
        position: relative;
        top: -1px;
      }
      .running {
        background: url("../../assets/images/p-running.png");
        background-size: contain;
        background-repeat: no-repeat;
      }
      .fail {
        background: url("../../assets/images/p-magenta.png");
        background-size: contain;
        background-repeat: no-repeat;
      }
      .success {
        background: url("../../assets/images/p-success.png");
        background-size: contain;
        background-repeat: no-repeat;
        height: 16px;
        left: 3px;
      }
      .log-info {
        background: #333;
        color: #c2c2c2;
        height: 400px;
        overflow-y: auto;
        overflow-x: hidden;
        div {
          display: flex;
          .index {
            margin: 0 10px;
          }
          .info {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>

<style lang="less">
.log-details {
  .ivu-collapse {
    background: #ffffff;
  }
  .ivu-collapse>.ivu-collapse-item>.ivu-collapse-header>i {
    font-size: 16px;
    margin-right: 0px;
  }
}
</style>
